<template>
  <div class="app-container" v-if="!showEnd">
    <div class="header">
      <div class="round-info">
        <!-- <span class="round-text">第 {{ currentRound }} 轮</span> -->
        <!-- <span class="timer">
          <i class="el-icon-time" @click="startTimer" style="cursor: pointer; font-size: 32px;"></i>
          <span class="time-text">{{ minutes }}:{{ seconds }}</span>
        </span> -->
      </div>
    </div>

    <div class="main-content">
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-card class="qu-content" shadow="hover">
            <div v-if="currentQuestion" class="question-wrapper">
              <div class="question-header">
                <h1 class="round-title">抢答题 {{ currentQuestionIndex + 1 }}/3</h1>
              </div>
              
              <div class="question-content">
                <h2 class="question-text">{{ currentQuestion.content }}</h2>
                <transition name="fade">
                  <div v-if="showAnswer" class="answer-content">
                    <div class="answer-title">正确答案:</div>
                    <div class="answer-text">{{ currentQuestion.answer }}</div>
                  </div>
                </transition>
              </div>

              <div class="action-buttons">
                <el-button 
                  type="primary"
                  size="large"
                  class="action-btn"
                  @click="grabAnswer"
                  v-if="!showAnswer"
                  :disabled="isGrabbed"
                >
                  显示答案
                </el-button>
                <el-button 
                  type="success"
                  size="large"
                  class="action-btn"
                  @click="nextQuestion"
                  v-if="showAnswer"
                  :class="{disabled: isLastQuestion == '结束'}"
                >
                  {{ isLastQuestion ? '结束' : '下一题' }}
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="btn">
      <el-button @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button @click="isEnd" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </div>
  </div>

  <div class="preview-container" v-else>
    
    <div class="role-exam">
      <!-- <div class="btn">
        <el-button
          @click="() => this.$router.push({ name: 'QuickRequired' })"
          icon="el-icon-arrow-left"
        >
        </el-button>
        <el-button
          @click="showRole"
          icon="el-icon-arrow-right"
          style="float: right"
        >
        </el-button>
      </div> -->
    </div>

    
  </div>

</template>

<script>
import { isShallow } from 'vue';

export default {
  name: 'ResponderState',
  
  data() {
    return {
      currentRound: 1,
      currentQuestionIndex: 0,
      showAnswer: false,
      isGrabbed: false,
      timer: null,
      timeLeft: 60,
      minutes: '00',
      seconds: '60',
      showEnd:false,
      allQuestions: [
        // 第一轮 - 派出所基础业务
        {
          id: 1,
          content: '派出所"两队一室"分别指什么？',
          answer: '社区警务队、案件办理队和综合指挥室',
          round: 1
        },
        {
          id: 2,
          content: '社区警务工作三大任务是什么？',
          answer: '规定任务、指令任务、推送任务',
          round: 1
        },
        {
          id: 3,
          content: '社区民警的主要职责有哪些？',
          answer: '管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众',
          round: 1
        },
        
        
      ]
    }
  },

  computed: {
    currentRoundQuestions() {
      return this.allQuestions.filter(q => q.round === this.currentRound)
    },
    
    currentQuestion() {
      return this.currentRoundQuestions[this.currentQuestionIndex]
    },

    isLastQuestion() {
      return this.currentQuestionIndex === 7
    }
  },

  methods: {

    isEnd(){
      this.showEnd = true
    },

    startTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      
      this.timeLeft = 60
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if(this.timeLeft <= 0) {
          this.showAnswer = true
          clearInterval(this.timer)
          this.$message({
            message: '答题时间已到!',
            type: 'warning',
            duration: 2000
          })
        }
      }, 1000)
    },

    grabAnswer() {
      this.isGrabbed = true
      this.showAnswer = true
      clearInterval(this.timer)
    },

    nextQuestion() {
      if(this.currentQuestionIndex < 7) {
        this.currentQuestionIndex++
        this.showAnswer = false
        this.isGrabbed = false
        this.timeLeft = 60
        this.minutes = '00'
        this.seconds = '60'
      } else {
        this.$message({
          message: '答题完成!',
          type: 'success',
          duration: 2000
        })
        // this.$router.push({name:'ListQuick'})
      }
    }
  },

  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  min-height: 100vh;
  background-image: url("/images/bg.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  padding: 30px;
  
  .round-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    
    .round-text {
      font-size: 36px;
      font-weight: bold;
      color: #f8f8f9;
    }
    
    .timer {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f56c6c;
      .time-text {
        font-size: 36px;
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }
}

.main-content {
  flex: 1;
  width: 100%;
  padding: 20px;
}

.qu-content {
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);

  .question-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .question-header {
    width: 100%;
    text-align: center;
    
    .round-title {
      font-size: 42px;
      color: #303133;
      margin: 0;
    }
  }

  .question-content {
    width: 100%;
    text-align: center;
    
    .question-text {
      font-size: 38px;
      color: #303133;
      margin-bottom: 40px;
      line-height: 1.5;
    }

    .answer-content {
      padding: 30px;
      background-color: #f5f7fa;
      border-radius: 8px;
      
      .answer-title {
        font-size: 35px;
        color: #409EFF;
        margin-bottom: 20px;
        font-weight: bold;
      }
      
      .answer-text {
        font-size: 34px;
        line-height: 1.8;
        color: #606266;
      }
    }
  }

  .action-buttons {
    margin-top: 40px;

    .action-btn {
      padding: 20px 50px;
      font-size: 24px;
    }
  }
}

.btn {
  width: 98%;
  bottom: 20px;
  position: fixed;
  opacity: 0.3;

  // .el-button {
  //   font-size: 20px;
  //   padding: 15px 30px;
  // }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.preview-container {
  min-height: 100vh;
  /* background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%); */
  background-image: url("/images/bg/34.jpg");
  background-position: center;
  background-repeat: no-repeat;

  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 20px; */
}

</style>